import React, { useState } from "react";
import { Card } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Space, Button } from 'antd';
import './waitclass.scss'
import { useNavigate } from "react-router";
const App = () => {
    const navigate = useNavigate()
    //定义一个今日课程的状态
    const [todayCourse, setTodayCourse] = useState([
        {
            time: '15:30-17:30',
            name: '张子枫',
            subject: '物理',
            grade: '初一',
        },
        {
            time: '15:30-17:30',
            name: '张子枫',
            subject: '物理',
            grade: '初一',
        },
        {
            time: '15:30-17:30',
            name: '张子枫',
            subject: '物理',
            grade: '初一',
        },
    ])
    //定义一个明日课程状态
    const [tomorrowCourse, setTomorrowCourse] = useState([
        {
            time: '15:30-17:30',
            name: '张子枫',
            subject: '物理',
            grade: '初一',
        },
        {
            time: '15:30-17:30',
            name: '张子枫',
            subject: '物理',
            grade: '初一',
        },
        {
            time: '15:30-17:30',
            name: '张子枫',
            subject: '物理',
            grade: '初一',
        }, 
        {
            time: '15:30-17:30',
            name: '张子枫',
            subject: '物理',
            grade: '初一',
        },
        {
            time: '15:30-17:30',
            name: '张子枫',
            subject: '物理',
            grade: '初一',
        },
        {
            time: '15:30-17:30',
            name: '张子枫',
            subject: '物理',
            grade: '初一',
        }, 
        {
            time: '15:30-17:30',
            name: '张子枫',
            subject: '物理',
            grade: '初一',
        },
        {
            time: '15:30-17:30',
            name: '张子枫',
            subject: '物理',
            grade: '初一',
        },
        {
            time: '15:30-17:30',
            name: '张子枫',
            subject: '物理',
            grade: '初一',
        }, 
    
    ]);



    return (
        <div className="mycourse">
            {/* <div className="fourTite">
                <span>待上课程</span>
                <span>课程记录</span>
                <span>我的课表</span>
                <span>空闲时间</span>
            </div> */}
            <p>今日课程（3节）</p>
            <div className="box">
                {
                    todayCourse && todayCourse.map((item, index) => (
                        <div key={index}>
                            <Card style={{ width: 300 }}>
                                <Space wrap size={16}>
                                    <Avatar size={64} icon={<UserOutlined />} />
                                </Space>
                                <p>
                                    <span>{item.time}</span>
                                    <span >详情</span>
                                    <br />
                                    <br />
                                    <span>{item.name}</span>
                                    <span>{item.grade}</span>
                                    <span>{item.subject}</span>
                                </p>
                                <Button
                                onClick={()=>{
                                    navigate('/classroom',{
                                        state:{
                                            courseInfo:item
                                        }
                                    })
                                }}
                                >进入教室</Button>
                            </Card>
                        </div>
                    ))
                }
            </div>
            <p>明日课程（10节）</p>
            <div className="box">
                <div className="box">
                    {
                        tomorrowCourse && tomorrowCourse.map((item, index) => (
                            <div key={index}>
                                <Card style={{ width: 300 }}>
                                    <Space wrap size={16}>
                                        <Avatar size={64} icon={<UserOutlined />} />
                                    </Space>
                                    <p>
                                        <span>{item.time}</span>
                                        <span >详情</span>
                                        <br />
                                        <br />
                                        <span>{item.name}</span>
                                        <span>{item.grade}</span>
                                        <span>{item.subject}</span>
                                    </p>
                                    <Button disabled>进入教室</Button>
                                </Card>
                            </div>
                        ))
                    }
                </div>
            </div>
        </div>

    )
}
export default App